
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>highLight</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<body>


  <div id="app">

    <a href="#aaa">锚点</a>

    <div v-for="index in 50" :id="index == 50?'aaa':''">{{index}}</div>

    <div>
      <input v-model="searchInput" type="text" placeholder="请输入搜索关键字"/>
      <button @click="searchFn">搜索</button>
    </div>

    <div id="content">
      <p v-for="(item,index) in sites" v-html="item.name"></p>
    </div>

  </div>
</body>

<script type="text/javascript">
   
  new Vue({
    el: '#app',
    data: {
      sites: [
            { name: '滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。' },
            { name: '青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。一壶浊酒喜相逢。古今多少事，都付笑谈中。' },
            { name: '青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢。古今多少事，都付笑谈中。滚滚长江东逝水，浪花淘尽英雄。是非成败转头空。' }
      ],
      searchInput:''
    },
    mounted:function(){
      // console.log('初始化')
    },
    methods:{
      searchFn:function(){
        var vueThis = this;
        // vueThis.sites = [];
        // setTimeout(function(){
          // vueThis.sites = [

          // ]
          // console.log(123) 
          // vueThis.$nextTick(function(){ 
            // const content = document.querySelectorAll('#content p');
            this.sites.forEach((item,index) => {
              // const text = item.innerHTML;
              const keyWords = vueThis.searchInput;
              const cut = item.name.split(keyWords);
              console.log(cut);
              //把被选中的切开 然后再添加css然后再拼接
              item.name = cut.join('<span style="color:red;font-weight:bold">' + keyWords + '</span>')

              // console.log(111,vueThis.sites)
              // console.log(cut);
              //把split分解开的数组拼在一起并在中间加上样式和关键字
              // item.innerHTML = cut.join('<span style="color:red;font-weight:bold">' + keyWords + '</span>');
              // console.log(cut.join('<span style="color:red;font-weight:bold">' + keyWords + '</span>'));
            });
          // })

        // },500)
      }
    }

  })




</script>

</html>